<template>
	<el-container class="van-index-box">
		<el-header class="van-index-box-header">
			<Header></Header>
		</el-header>
		<el-main class="van-index-box-main">
			<div class="van-index-box-main-conten">
				<div class="van-index-box-main-conten-from">
					<el-input v-model="input" placeholder="点击输入搜索内容..." @keyup.enter="enterToLogin"
						class="input-with-select">
						<template #append>
							<el-button @click="link" type="text" size="small"> &nbsp;搜索&nbsp;</el-button>
						</template>
					</el-input>
				</div>
				<p class="van-index-ps">
					本站已收录：
				</p>
				<p class="van-index-ps">
					文章111024个 漏洞47394个 工具2300个
				</p>
			</div>
		</el-main>
		<el-footer class="van-index-box-footer">
			<Footer></Footer>
		</el-footer>
	</el-container>
</template>

<script>
	import {
		defineComponent
	} from 'vue'
	import {
		ElNotification
	} from 'element-plus'
	import Header from '../components/layout/Header.vue'
	import Footer from '../components/layout/Footer.vue'
	export default defineComponent({
		name: "index",
		components: {
			Header,
			Footer,
			// Search
		},
		data() {
			return {
				input: '',
				scrollTop: 0, //滚轮滚动
				articleList: {
					code: 0
				}
			}
		},
		methods: {
			// 点击搜索
			link() {
				if (this.input == '') {
					ElNotification({
						title: '提示',
						message: '请输入搜索内容',
						duration: 0,
					})
				} else {
					console.log(this.input + '点击！')
					this.$router.push({path:'/search',query:{key:this.input}});
				}
			},
			// 监听回车键
			enterToLogin() {
				this.link();
			}
		}
	});
</script>

<style lang="less" scoped>
	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}

	.van-index-box {
		height: 100%;
		height: 100vh;
		background-image: url(../assets/bg.jpg);
		/* background-size: 100% 100%; */

		.van-index-box-header {
			/* position: fixed;
			top: 0;
			left: 0;
			z-index: 1000; */
			width: 100%;
			height: 60 px;
			background: #1a1a2a;
			overflow: hidden;
		}

		.van-index-box-main {
			background-color: #1a1a2a;
			-webkit-transition: 2s;
			transition: 2s;
			/* 垂直居中 */
			display: flex !important;
			align-items: center;
			justify-content: center;
		}

		.van-index-box-footer {
			background: #1a1a2a;
		}
	}


	.van-index-box-main-conten {
		width: 60%;
		height: 300px;
		margin: auto;

		.van-index-ps {
			font-size: 12px;
			color: #9e9e9e;
			margin-top: 10px;
			margin-bottom: 10px;
		}
	}

	.van-index-box-main:hover {
		background-color: #1a1a2acc;
	}



	/* 响应事件 md 宽小于992时 */
	@media screen and (max-width:992px) {
		.van-index-box-main-conten {
			width: 60% !important;
		}
	}

	/* 响应事件 sm 宽小于768px时 */
	@media screen and (max-width:768px) {
		.van-index-box-main-conten {
			width: 270px !important;
		}
	}
</style>
